<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>默认布局</title>
</head>
<style type="text/css">
  html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  ul > li {
    list-style: none;
  }

  article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /*头部高度固定*/
  header {
    background: #b3d4fc;
    height: 60px;
  }

  /*中间高度根据去除头尾后动态获取*/
  main {
    flex: 1;
    display: flex;
  }
  /*尾部高度固定*/
  footer {
    background: #b3d4fc;
    height: 60px;
  }

  aside {
    display: flex;
    background-color: antiquewhite;
    flex:0 0 200px;
  }
  /*宽高动态获取*/
  section {
     display: flex;
     flex:1;
   }
</style>
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
<script src="../../subassembly/common/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/Init.js"></script>
<script type="text/javascript" src="deflate/pako.min.js"></script>
<script type="text/javascript" src="deflate/base64.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript" src="sanitizer/sanitizer.min.js"></script>
<script type="text/javascript">
  mxLanguage = 'zh';
  var mxLoadStylesheets = false;
  mxBasePath = '../../subassembly/mxgraph';
  RESOURCE_BASE = '../../subassembly/mxgraph/resources/editor_zh';
</script>
<script type="text/javascript" src="../../subassembly/mxgraph/js/mxClient.js"></script>
<script type="text/javascript" src="js/EditorUi.js"></script>
<script type="text/javascript" src="js/Editor.js"></script>
<script type="text/javascript" src="js/Sidebar.js"></script>
<script type="text/javascript" src="js/Graph.js"></script>
<script type="text/javascript" src="js/Format.js"></script>
<script type="text/javascript" src="js/Shapes.js"></script>
<script type="text/javascript" src="js/Actions.js"></script>
<script type="text/javascript" src="js/Menus.js"></script>
<script type="text/javascript" src="js/Toolbar.js"></script>
<script type="text/javascript" src="js/Dialogs.js"></script>
<body>
<article>
  <main>
    <section>
      <div id="container"></div>
    </section>
  </main>
</article>
<script type="text/javascript">
  // Extends EditorUi to update I/O action states based on availability of backend
  (function()
  {
    var editorUiInit = EditorUi.prototype.init;

    EditorUi.prototype.init = function()
    {
      editorUiInit.apply(this, arguments);
      this.actions.get('export').setEnabled(false);

      // Updates action states which require a backend
      if (!Editor.useLocalStorage)
      {
        mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
        {
          var enabled = req.getStatus() != 404;
          this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
          this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
          this.actions.get('save').setEnabled(enabled);
          this.actions.get('saveAs').setEnabled(enabled);
          this.actions.get('export').setEnabled(enabled);
        }));
      }
    };

    // Adds required resources (disables loading of fallback properties, this can only
    // be used if we know that all keys are defined in the language specific file)
    mxResources.loadDefaultBundle = false;
    var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
      mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

    // Fixes possible asynchronous requests
    mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
    {
      // Adds bundle text to resources
      mxResources.parse(xhr[0].getText());

      // Configures the default graph theme
      var themes = new Object();
      themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();

      // Main
      new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
    }, function()
    {
      document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
    });
  })();
</script>
</body>
</html>
